<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="frontPath" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <link type="text/css" rel="stylesheet" href="${frontPath}/js/jQueryLayout/layout-default-latest.css"/>
	<link type="text/css" rel="stylesheet" href="${frontPath}/js/jQueryLayout/complex.css"/>
    <link href="${frontPath}/style/normal.css" rel="stylesheet" type="text/css"/>
    <link href="${frontPath}/style/dvMsgBox_content.css" rel="stylesheet" type="text/css"/>
	<link href="${frontPath}/style/dvMsgBox.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="${frontPath}/js/JQueryzTreev3.3/css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <style type="text/css">
		.ui-layout-pane-center { padding: 0;}
		.ui-layout-mask { background: #C00;opacity: .20;filter: alpha(opacity = 20);}
		body {font-family: Arial, sans-serif;*font-size: 0.85em;}
		p{margin: 1em 0;}
    </style>
    <script type="text/javascript" src="${frontPath}/js/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="${frontPath}/js/JQueryzTreev3.3/jquery.ztree.core-3.3.min.js"></script>
    <script type="text/javascript" src="${frontPath}/js/jQueryLayout/jquery.layout-latest.min.js"></script>
    <script type="text/javascript">

		var layoutSettings_Outer = {
			defaults:{
			},
			center__maskContents:true
		};
        var topLayout;
		function init(){
			topLayout = $('body').layout(layoutSettings_Outer);
            var zTree;
            var bodyFrame;
            var isRunRoot = false;
            var setting = {
                view:{
                    selectedMulti:false
                },
                async:{
                    enable:true,
                    url:"${frontPath}/backEnd/type/loadTree.json",
                    autoParam:["id=typeId"]
                },
                callback:{
                    beforeClick:function (treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj("leftTree");
                        if (treeNode.isParent) {
                            zTree.expandNode(treeNode);
                        }
                        var mainFrameElem = document.getElementById("centeriframe");
                        mainFrameElem.src = "${frontPath}/backEnd/type/type?typeId=" + treeNode.id;
                    },
                    onNodeCreated:function zTreeOnNodeCreated(event, treeId, treeNode) {
                        if (!isRunRoot) {
                            var zTree = $.fn.zTree.getZTreeObj("leftTree");
                            var nodes = zTree.getNodes();
                            zTree.reAsyncChildNodes(nodes[0], "1");
                            isRunRoot = true;
                        }
                    }
                } 
            };
			jQuery.fn.zTree.init(jQuery("#leftTree"), setting, null);
		}
    </script>
</head>
<body>

<iframe id="centeriframe" name="centeriframe" class="ui-layout-center" scrolling="auto" frameborder="0" ></iframe>

<div class="ui-layout-west" style="overflow:auto">
<div><button new>新增根部门</button></div>
    <ul id="leftTree" class="ztree"></ul>
</div>

<script>init();</script>
</body>
<script>
	$("[new]").click(function(){
		$("iframe").attr("src", 'newRoot');
	});
</script>
</html>
